<!-- 右边的属性 -->
<template>
  <div class='pd pt10' v-if="dqobj.title">
    <div class="title-label ">表单属性</div>


    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center">
        标签名称：
      </div>
      <div class=" flex-1 ">
        <n-input v-model:value="dqobj.title" type="text" placeholder="" size="medium" clearable @change=""></n-input>
      </div>
    </div>
    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center">
        key值：
      </div>
      <div class=" flex-1 ">
        <n-input v-model:value="dqobj.key" type="text" placeholder="" size="medium" clearable @change=""></n-input>
      </div>
    </div>
    <div class="mt10 display-flex" v-if="dqobj.type=='mapdz'">
      <div class="fz12 z3 vertical-center">
        经纬度的key：
      </div>
      <div class=" flex-1 ">
        <n-input v-model:value="dqobj.keyjw" type="text" placeholder="" size="medium" clearable @change=""></n-input>
      </div>
    </div>
    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center">
        占位：
      </div>
      <div class=" flex-1 ">
        <n-input-number v-model:value="dqobj.span"  placeholder="" size="medium" clearable @change=""></n-input-number >
      </div>
    </div>
    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center pt5">
        是否必填：
      </div>
      <div class=" flex-1 ">
        <n-radio-group  v-model:value="dqobj.required" name="radiogroup" class="jjhnxetrwre">
          <n-space>
            <n-radio :key="true" :value="true">
              是
            </n-radio>
            <n-radio :key="false" :value="false">
              否
            </n-radio>
          </n-space>
        </n-radio-group>
      </div>
    </div>

    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center pt5">
        表格是否显示：
      </div>
      <div class=" flex-1 ">
        <n-radio-group  v-model:value="dqobj.istable" name="radiogroup" class="jjhnxetrwre">
          <n-space>
            <n-radio :key="true" :value="true">
              是
            </n-radio>
            <n-radio :key="false" :value="false">
              否
            </n-radio>
          </n-space>
        </n-radio-group>
      </div>
    </div>
    
    <div class="mt10 "  v-if="dqobj.type=='radio'">
      <div class="fz12 z3">
        选项数据：
      </div>
      <div class=" flex-1 ">

  <n-dynamic-input
  v-model:value="dqobj.opt"
  :on-create="onCreate"
  >
  <template #default="{ value }">
      <div style="display: flex; align-items: center; width: 100%">
        <n-input v-model:value="value.label" type="text" />
        <n-input v-model:value="value.value" type="text" class="ml10"/>
      </div>
    </template>
  </n-dynamic-input>

      </div>
    </div>

    <div v-if="dqobj.istable">
      <div class="title-label mt20">表格属性</div>
    
    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center">
        宽度：
      </div>
      <div class=" flex-1 ">
        <n-input-number v-model:value="dqobj.width"  placeholder="" size="medium" clearable @change=""></n-input-number >
      </div>
    </div>
    <div class="mt10 display-flex">
      <div class="fz12 z3 vertical-center pt5">
        是否显示在搜索栏：
      </div>
      <div class=" flex-1 ">
        <n-radio-group  v-model:value="dqobj.search" name="radiogroup" class="jjhnxetrwre">
          <n-space>
            <n-radio :key="true" :value="true">
              是
            </n-radio>
            <n-radio :key="false" :value="false">
              否
            </n-radio>
          </n-space>
        </n-radio-group>
      </div>
    </div>
    </div>
   
  </div>
</template>
<script lang='ts' setup>
import { ref, computed } from "vue"
import store from "../../../../store";
const dqobj = computed(() => {
  return store.state.ddmdqobj
})
const  onCreate =  ()=> {
        return {
          label: '',
          value: ''
        }
      }
</script>
<style scoped></style>